import { Menu } from 'antd';
import React, { useLayoutEffect, useRef, useState } from 'react';
import { history, useModel } from 'umi';

import AreaFilterList from '../AreaFilter';
import BlacklistDeviceList from '../BlacklistDevice';
import DomainMappingList from '../DomainMapping';
import GlobalParamList from '../GlobalParam';
import ParamUpdateList from '../ParamUpdate';
import ProductParamList from '../ProductParam';
import SmartModeConfigList from '../SmartModeConfig';
import TagList from '../Tag';
import TipList from '../Tip';

import { PageContainer } from '@ant-design/pro-components';
import { useMatch } from '@umijs/max';
import styles from './index.less';

type SettingsState = {
  mode: 'inline' | 'horizontal';
};

const ProductSetting: React.FC = (props: any) => {
  const dom = useRef<HTMLDivElement>();

  const { hasRight } = useModel('useAuthModel');

  const getDefaultModule = () => {
    if (hasRight('productparam_list')) {
      return 'productParam';
    }
    if (hasRight('areafilter_list')) {
      return 'areaFilter';
    }
    if (hasRight('smartmodeconfig_list')) {
      return 'smartmodeConfig';
    }
    if (hasRight('tip_list')) {
      return 'tip';
    }
    if (hasRight('tag_list')) {
      return 'tag';
    }
    if (hasRight('globalparam_list')) {
      return 'globalParam';
    }
    if (hasRight('productparam_list')) {
      return 'domainMapping';
    }
    if (hasRight('productparam_list')) {
      return 'paramUpdate';
    }
    if (hasRight('productparam_list')) {
      return 'blacklistDevice';
    }

    history.push('/exception/404');
    return '';
  };

  const menuMap: Record<string, React.ReactNode> = {
    globalParam: '全局配置',
    domainMapping: '域名映射',
    smartmodeConfig: '智能模式',
    productParam: '产品参数',
    areaFilter: '地区策略',
    tip: '提示信息',
    tag: '标签管理',
    paramUpdate: '参数批量更新',
    blacklistDevice: '蜜罐设备',
  };

  const [initConfig, setInitConfig] = useState<SettingsState>({
    mode: 'inline',
  });

  const { location } = props;
  // let module = location.query?.module ?? getDefaultModule();
  const match = useMatch({ path: '/buisness/productsetting/:module' });
  const module = match?.params?.module ?? getDefaultModule();

  const resize = () => {
    requestAnimationFrame(() => {
      if (!dom.current) {
        return;
      }
      let mode: 'inline' | 'horizontal' = 'inline';
      const { offsetWidth } = dom.current;
      if (dom.current.offsetWidth < 641 && offsetWidth > 400) {
        mode = 'horizontal';
      }
      if (window.innerWidth < 768 && offsetWidth > 400) {
        mode = 'horizontal';
      }
      setInitConfig({ ...initConfig, mode: mode as SettingsState['mode'] });
    });
  };

  useLayoutEffect(() => {
    if (dom.current) {
      window.addEventListener('resize', resize);
      resize();
    }
    return () => {
      window.removeEventListener('resize', resize);
    };
  }, [dom.current]);

  const getMenuItems = () => {
    let items = [];
    if (hasRight('globalparam_list')) {
      items.push({ label: menuMap['globalParam'], key: 'globalParam' });
    }
    if (hasRight('productparam_list')) {
      items.push({ label: menuMap['blacklistDevice'], key: 'blacklistDevice' });
    }
    if (hasRight('productparam_list')) {
      items.push({ label: menuMap['domainMapping'], key: 'domainMapping' });
    }
    if (hasRight('smartmodeconfig_list')) {
      items.push({ label: menuMap['smartmodeConfig'], key: 'smartmodeConfig' });
    }
    if (hasRight('productparam_list')) {
      items.push({ label: menuMap['productParam'], key: 'productParam' });
    }
    if (hasRight('areafilter_list')) {
      items.push({ label: menuMap['areaFilter'], key: 'areaFilter' });
    }
    if (hasRight('tip_list')) {
      items.push({ label: menuMap['tip'], key: 'tip' });
    }
    if (hasRight('tag_list')) {
      items.push({ label: menuMap['tag'], key: 'tag' });
    }
    if (hasRight('productparam_list')) {
      items.push({ label: menuMap['paramUpdate'], key: 'paramUpdate' });
    }

    return items;
  };

  const renderChildren = () => {
    switch (module) {
      case 'globalParam':
        if (hasRight('globalparam_list')) {
          return <GlobalParamList />;
        }
        return null;
      case 'blacklistDevice':
        if (hasRight('productparam_list')) {
          return <BlacklistDeviceList />;
        }
        return null;
      case 'domainMapping':
        if (hasRight('productparam_list')) {
          return <DomainMappingList />;
        }
        return null;
      case 'smartmodeConfig':
        if (hasRight('smartmodeconfig_list')) {
          return <SmartModeConfigList />;
        }
        return null;
      case 'productParam':
        if (hasRight('productparam_list')) {
          return <ProductParamList />;
        }
        return null;
      case 'areaFilter':
        if (hasRight('areafilter_list')) {
          return <AreaFilterList />;
        }
        return null;
      case 'tip':
        if (hasRight('tip_list')) {
          return <TipList />;
        }
        return null;
      case 'tag':
        if (hasRight('tag_list')) {
          return <TagList />;
        }
        return null;

      case 'paramUpdate':
        if (hasRight('productparam_list')) {
          return <ParamUpdateList />;
        }
        return null;

      default:
        return null;
    }
  };

  return (
    <PageContainer>
      <div
        className={styles.main}
        ref={(ref) => {
          if (ref) {
            dom.current = ref;
          }
        }}
      >
        <div className={styles.leftMenu}>
          <Menu
            mode={initConfig.mode}
            selectedKeys={[module]}
            onClick={({ key }) => {
              // setInitConfig({
              //   ...initConfig,
              //   selectKey: key,
              // });
              //history.push(`/buisness/productsetting?module=${key}`);
              const url = `/buisness/productsetting/${key}`;
              //console.log(url);
              history.push(url);
            }}
            items={getMenuItems()}
          />
        </div>
        <div className={styles.right}>
          <div className={styles.title}>{menuMap[module]}</div>
          {renderChildren()}
        </div>
      </div>
    </PageContainer>
  );
};

export default ProductSetting;
